<template>
  <div class="chart-group">
    <ResortBarCard class="large-chart" />
    <HotelBarsPesone
      v-for="(item, index) in ratingItems"
      :key="index"
      class="large-chart"
      :rating-info="item"
      :class="{ 'first-rating': index === 0, 'second-rating': index === 1 }"
    />
    <SocialMediaPlatform class="large-chart" />
  </div>
</template>

<script>
import ResortBarCard from "./ResortBarCard.vue";
import HotelBarsPesone from "./HotelBarsPesone.vue";
import SocialMediaPlatform from "../echarts/CirPie/SocialMediaPlatform.vue";

export default {
  name: "ChartGroup",
  components: {
    ResortBarCard,
    HotelBarsPesone,
    SocialMediaPlatform,
  },
  props: {
    ratingItems: {
      type: Array,
      default: () => [
        {
          logo: require("@/assets/resAndBar/tripadvisor.png"),
          platform: "Tripadvisor",
          rating: 4.5,
          reviews: 128,
          responseRate: 70,
          responseTime: "3.5 days",
          guests: 128,
          recentReviews: 12,
          trendArrow: "@/assets/updown.png",
        },
        {
          logo: require("@/assets/resAndBar/google1.png"),
          platform: "Google",
          rating: 4.7,
          reviews: 156,
          responseRate: 85,
          responseTime: "2.5 days",
          guests: 145,
          recentReviews: 15,
          trendArrow: "@/assets/updown.png",
        },
      ],
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-group {
  display: flex;
  width: 100%;
  gap: 20px;

  .large-chart {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: auto;

    &:nth-child(2) {
      background: #f1f8fe;
    }
    &:nth-child(3) {
      background: #f0f4ff;
    }
    &:nth-child(4) {
      background: #ffffff;
    }

    > div {
      padding: 16px;
    }
  }
}
</style>
